<template>
  <div class="app-library">
    <div class="app-library-info">
      <img
        :src="fullUrl(artist.images[0])"
        importance="high"
      >
      <div class="app-library-info-content">
        <div class="app-library-info-actions">
          <Button
            type="primary"
            shape="circle"
            :icon="isFollowing?'md-heart':'md-add'"
            class="like"
            @click="handleLike"
          >
            {{ artist.followersCount }} 关注
          </Button>
        </div>
        <h1 class="app-library-info-title">
          {{ artist.name }}
        </h1>
        <p class="app-library-info-subtitle">
          <span
            v-for="alt in artist.alternateNames"
            :key="alt"
          >{{ alt }}</span>
        </p>
        <p class="app-library-info-tag">歌手</p>
        <div class="app-library-info-desc">
          <input
            type="checkbox"
            style="display: none;"
            :checked="descToggle"
          >
          <p>
            {{ artist.description }}
            <a
              style="text-decoration: underline;"
              @click="descToggle = !descToggle"
            >收起</a>
          </p>
          <div
            class="app-library-info-desc-more"
            @click="descToggle = !descToggle"
          >
            <Icon type="ios-arrow-down" />
          </div>
        </div>
      </div>
    </div>
    <AlbumList :albums="artist.hasAlbums" />
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import { CreateQueryParams } from '@nestjsx/crud-request'
import { MarkRequired } from 'ts-essentials'
import {
  Artist,
  getArtistById,
  checkFollowing,
  follow,
  unfollow
} from '@/api/resources'
import { LayoutModule, BreadcrumbItem } from '@/store/modules/layout'
import { UserModule } from '@/store/modules/user'
import { cdn } from '@/utils'
import * as _ from 'lodash'
import AlbumList from './AlbumList.vue'

type RequiredArtist = MarkRequired<Partial<Artist>, 'hasAlbums'>

@Component({
  name: 'Artist',
  components: {
    AlbumList
  }
})
export default class extends Vue {
  private params: CreateQueryParams = {
    join: [
      {
        field: 'hasAlbums',
        select: ['id']
      }
    ]
  };

  private breadcrumb: BreadcrumbItem[] = [];
  private artist: Partial<Artist> = {};
  private isFollowing = false;
  private descToggle = false;

  async created () {
    this.artist = (
      await getArtistById(this.$route.params.artistId, this.params)
    ).data

    try {
      this.isFollowing =
        UserModule.token !== ''
          ? (await checkFollowing(this.$route.params.artistId)).data
          : false
    } catch (e) {
      console.log(e)
    }

    const artistCrumb: BreadcrumbItem = {
      icon: 'person',
      title: {
        content: this.artist.name || '未知歌手',
        route: this.$router.resolve(this.$route.fullPath).location
      }
    }
    this.breadcrumb.push(artistCrumb)

    LayoutModule.SetBreadcrumb(this.breadcrumb)
  }

  private fullUrl (path: string) {
    return cdn(path)
  }

  private getArtistRoute (id: number) {
    return this.$router.resolve({
      name: 'LibraryArtist',
      params: { artistId: id.toString() }
    }).location
  }

  private async handleLike () {
    if (UserModule.token === '') {
      this.$Message.warning('您尚未登录')
      return
    }

    let res = null
    if (this.isFollowing) {
      res = await unfollow(this.$route.params.artistId)
    } else {
      res = await follow(this.$route.params.artistId)
    }
    if (res) {
      _.merge(this.artist, res.data)
      this.isFollowing = !this.isFollowing
    }
  }
}
</script>

<style lang="less" scoped>
@import "../../../styles/theme";

@info-img-size: 20%;
@info-img-size-min: 160px;
@info-img-size-max: 220px;
@title-color: #fff5c3;

.app-library-info {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  margin-bottom: 16px;

  > img {
    width: @info-img-size;
    height: @info-img-size;
    min-width: @info-img-size-min;
    min-height: @info-img-size-min;
    max-width: @info-img-size-max;
    max-height: @info-img-size-max;
    border-radius: 20px;
    box-shadow: 6px 6px 6px #202020;
  }

  .app-library-info-content {
    flex-grow: 1;
    padding-left: 2rem;

    .app-library-info-title {
      color: @title-color;
      font-size: 2.5em;
    }

    .app-library-info-subtitle {
      color: @title-color;
      font-size: 1.5em;
      span {
        &::after {
          content: "/";
        }
        &:last-of-type {
          &::after {
            content: none;
          }
        }
      }
    }

    .app-library-info-tag {
      font-size: 1.2em;
      font-weight: 700;
      margin: 4px 0;
    }

    .app-library-info-publishdate {
      margin: 8px 0;
    }

    .app-library-info-actions {
      float: right;
      width: 132px;

      button {
        display: block;
        margin: 8px 0;
        width: 100%;
        text-align: left;
        font-weight: bold;
        &.like {
          background-color: @btn-red;
          border-color: @btn-red;
        }
        &.add {
          background-color: @btn-green;
          border-color: @btn-green;
        }
        &.post {
          background-color: @btn-blue;
          border-color: @btn-blue;
        }
      }
    }

    .app-library-info-desc {
      input {
        &:checked {
          & + p {
            height: auto;
          }
          & + p + .app-library-info-desc-more {
            display: none;
          }
        }
      }
      p {
        height: 90px;
        overflow: hidden;
      }
      .app-library-info-desc-more {
        width: 100%;
        height: 48px;
        display: flex;
        align-content: center;
        justify-content: center;
        position: relative;
        margin-top: -48px;
        background-image: linear-gradient(
          0deg,
          @background-color-base,
          fade(@background-color-base, 65%) 70%,
          fade(@background-color-base, 2%)
        );
        .ivu-icon-ios-arrow-down {
          margin-top: 24px;
          color: fade(@text-color, 60%);
          font-size: 20px;
          transform: scale(3, 1);
        }
      }
    }
  }
}
</style>
